<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>position</title>
  <meta name="description" content="">
  <meta name="author" content="jhta">

  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <style>
  	#absol {
  		width : 400px;
  		height: 400px;
  		border: 1px solid orange;
  		position: relative;
  	}
  	#rela {
  		width : 400px;
  		height: 400px;
  		border: 1px solid green;
  		//position: absolute
  	}
  	#blk {
  		width : 400px;
  		height: 400px;
  		border: 1px solid black;
  	}
  	
  	#fa, #mo, #son {
  		width: 100px; height: 60px; border: 2px dotted red;
  		position: absolute;
  		text-align: center;
  		font-size: 20px;
  		color : white;
  		padding-top: 40px;
  		font-weight: bold;
  	}
  	#fa {
  		background-image: url(./images/top.jpg);
  		opacity : 0.7;
  		left: 121px;
  		top: 10px;
  	}
  	#mo {
  		background-image: url(./images/top.jpg);
  		opacity : 0.7;
  		left : 232px;
  		top : 10px;
  	}
  	#son {
  		background-image: url(./images/top.jpg);
  		opacity : 0.7;
  		left : 10px;
  		top : 10px;
  	}
  	
  	#fa2, #mo2, #son2 {
  		width: 100px; 
  		height: 60px; 
  		border: 2px solid red;
  		position: relative;
  		text-align: center;
  		font-size: 15px;
  		color : black;
  		padding-top: 40px;
  		font-weight: bold;
  	}
  	
  	#fa2 {
  		background-image: url(./images/top2.jpg);
  		opacity : 0.5;
  		left: 0px;
  		top: 50px;
  	}
  	#mo2 {
  		background-image: url(./images/top2.jpg);
  		opacity : 0.5;
  		left : 0px;
  		top : 0px;
  	}
  	#son2 {
  		background-image: url(./images/top2.jpg);
  		opacity : 0.5;
  		left : 0px;
  		top : 0px;
  	}
  	#fa3, #mo3, #son3 {
  		width: 100px;
  		height: 60px;
  		border: 2px dotted red;
  		display : inline-block;
  		text-align: center;
  		font-size: 20px;
  		color : blue;
  		padding-top: 40px;
  		font-weight: bold;
  	}
  	#fa3 {
  		background-image: url(./images/top.jpg);
  		opacity : 0.7;
  		left: 121px;
  		top: 10px;
  	}
  	#mo3 {
  		background-image: url(./images/top.jpg);
  		opacity : 0.7;
  		left : 232px;
  		top : 10px;
  	}
  	#son3 {
  		background-image: url(./images/top.jpg);
  		opacity : 0.7;
  		left : 10px;
  		top : 10px;
  	}
  </style>
</head>

<body>

	<h1>relative</h1>
  <div id="rela">
  	<div id="mo2">마마</div>
  	<div id="fa2">파파</div>
  	
  	<div id="son2">자식</div>
  </div>
	
	
  <h1>absolute</h1>
  <div id="absol">
  	
  	<div id="fa">파파</div>
  	<div id="mo">마마</div>
  	<div id="son">자식</div>
  </div>
  
  
  
  <h1>display : block</h1>
  <div id="blk">
  	<div id="fa3">파파</div>
  	<div id="mo3">마마</div>
  	<div id="son3">자식</div>
  </div>
  
</body>
</html>
